<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大嘿嘿后台管理</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<script src="js/interfaceuRL.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios-0.18.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body style="background-color: #eee;">
	<div id="app">
		
	
		<div class="container" style="width: 30%;margin-top: 100px; ">
			<form>
				<h3>后台登录</h3>
			 <div class="form-group">
			     <label for="exampleInputName2">Name</label>
			     <input type="text" class="form-control" id="name" placeholder="Name" name="name">
			   </div>
			  <div class="form-group">
			    <label for="exampleInputPassword1">Password</label>
			    <input type="password" class="form-control" id="password" placeholder="Password" name="password">
			  </div>
			   <button type="button" onclick="checkLogin()" class="btn btn-primary" style="width: 100%;">登录</button>
			</form>
			
			
			
			<!--登录验证 模态框-->
			<div id="comment-login">		
				<!-- Modal -->
				<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				  <div class="modal-dialog" role="document">
				    <div class="modal-content">
				      <div class="modal-header">
				        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				        <h4 class="modal-title" id="myModalLabel">登录提示</h4>
				      </div>
				      <div class="modal-body">
				
				      </div>
				      <div class="modal-footer">
				        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				      </div>
				    </div>
				  </div>
				</div>
			</div>
			
			
		</div>
		</div>
	</body>
</html>

<script type="text/javascript">
      //这里没有用vue， 演示jquery的ajax异步请求
	 function checkLogin(){
		 //获取邮箱
		 var supername=$("#name").val();
		  // console.log(supername)
		 var superpassword=$("#password").val();
		  // console.log(superpassword)
		$.ajax({
			url: "http://localhost:8080/Blogs_demo/login/AdminSubmit",
			type: "POST",
			data: {"supername":supername,"superpassword":superpassword},
			dataType: "json",
			success: function (result){
					console.log(result)
					if(result.code==1){
						//将用户信息保存本地。这样其实并不安全。这里就是偷个懒。免得每次去数据库查询
						var sessionStorage=window.sessionStorage;
						sessionStorage.setItem("supername",result.supername);
						sessionStorage.setItem("superid",result.superid);
						sessionStorage.setItem("superpassword",result.superpassword);
						
						// sessionStorage.setItem("token",result.token)
						/*
						 登录成功跳转main.html网页:
						  如果在iframe框架下：
							   top.location.href   在顶层页面打开url（跳出iframe框架）
							   window.location.href 在当前frame中打开新页
						 */
						
				         window.location.href = "./main.html"
					}else if(result.code==0){
						//调用模态框
						$('#myModal').modal({
						  keyboard: false
						})
						//提示登录失败信息
						$(".modal-body").text(result.msg);
						
					}
					
			},
			error: function (result){
				alert("请求服务异常!"); 
			}
		 })
	
	 }
</script>


